<template>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="userName">
            <el-input v-model="ruleForm.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { login } from '@/api/login'
// import Cookies from 'js-cookie'
import cache from "@/plugins/cache";
export default {
    name: 'Login',
    data() {
        return {
            ruleForm: {
                userName: 'admin',
                password: '666666'
            },
            rules: {
                userName: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
                password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
            }
        }
    },
    methods: {
        submitForm(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    login(this.ruleForm).then((res) => {
                        if (res.data.code == 200) {
                            this.$message(res.data.msg)
                            // Cookies.set('token', res.data.data.token)
                            cache.session.setJSON('token', res.data.data.token)
                            // this.$store.dispatch("Login", res.data.data.token);
                            this.$router.push('/main').catch(() => {})
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        resetForm() {
            this.ruleForm = {
                userName: '',
                password: ''
            }
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss"></style>
